<template>
  <div>
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-container>
        <el-main>
          <!-- 数据查询 -->
          <el-input placeholder="请输入数值" v-model="s_y">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchByY"
            ></el-button>
          </el-input>
          <!-- 数据表格 -->
          <el-table :data="tableData">
            <el-table-column prop="id" label="ID" width="140">
            </el-table-column>
            <el-table-column prop="x" label="X值" width="120">
            </el-table-column>
            <el-table-column prop="y" label="Y值"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <!-- {{scope.row.id}} -->
                <el-button
                  @click.native.prevent="update_(scope.row)"
                  type="text"
                  size="small"
                >
                  修改
                </el-button>
                <el-button
                  @click.native.prevent="delete_(scope.row.id)"
                  type="text"
                  size="small"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="float: right">
            <el-button @click.native.prevent="add()" type="text"
              >新增数据</el-button
            >
            <el-button @click.native.prevent="removeAll()" type="text"
              >数据清空</el-button
            >
          </el-row>
        </el-main>
      </el-container>
    </el-container>
    <!--    新增弹窗-->
    <el-dialog title="新增数据" :visible.sync="dialogVisible_add" width="30%">
      <el-form ref="form" :model="data" label-width="80px">
        <el-form-item label="x">
          <el-input v-model="data.x"></el-input>
        </el-form-item>
        <el-form-item label="y">
          <el-input v-model="data.y"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_add = false">取 消</el-button>
        <el-button type="primary" @click="save_add">确 定</el-button>
      </span>
    </el-dialog>
    <!--    修改弹窗-->
    <el-dialog title="修改用户" :visible.sync="dialogVisible_up" width="30%">
      <el-form ref="form" :model="data" label-width="80px">
        <el-form-item label="x">
          <el-input v-model="data.x"></el-input>
        </el-form-item>
        <el-form-item label="y">
          <el-input v-model="data.y"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_up = false">取 消</el-button>
        <el-button type="primary" @click="save_up">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
import axios from 'axios'
// import qs from 'qs'
export default {
  data() {
    return {
      uid: this.$route.params.uid,
      tableData: [], // 数据列表
      dialogVisible_add: false, // 新增弹窗控制器
      dialogVisible_up: false, // 新增弹窗控制器
      s_y: null,
      data: {
        // 数据封装
        x: '',
        y: '',
      },
    }
  },
  created: function () {
    this.loadTableData()
  },
  methods: {
    loadTableData() {
      axios.get('http://localhost:8088/data/queryAll').then((response) => {
        this.tableData = response.data
      })
    },
    update_(row) {
      this.dialogVisible_up = true
      this.data = row
    },
    delete_(id) {
      // console.log(this.user)
      //   const data = JSON.stringify(this.data)
      if (confirm('是否删除此数据？')) {
        axios
          .get('http://localhost:8088/data/remove?id=' + id)
          .then((response) => {
            console.log(response.status)
            this.loadTableData()
            location.reload(0)
          })
      } else {
        location.reload(0)
      }
    },
    add() {
      this.data = {}
      this.dialogVisible_add = true
    },
    save_add() {
      // 新增
      axios
        .post('http://localhost:8088/data/add', this.data)
        .then((response) => {
          console.log(response.status)
          this.dialogVisible_add = false
          this.loadTableData()
        })
      // const data = JSON.stringify(this.data)
      // axios({
      //   method:'post',
      //   url:"http://localhost:8080/data/add",
      //   data:data,
      // })
      // this.dialogVisible_add = false
      // this.loadTableData()
    },
    save_up() {
      // const data = JSON.stringify(this.data)
      // console.log(data)
      axios
        .post('http://localhost:8088/data/update', this.data)
        .then((response) => {
          console.log(response.status)
          this.dialogVisible_up = false
          this.loadTableData()
        })
      // const data = JSON.stringify(this.data)
      // axios({
      //   method:'post',
      //   url:"http://localhost:8088/data/update",
      //   data:data
      // })
      // this.dialogVisible_up = false
      // this.loadTableData()
    },

    removeAll() {
      if (confirm('是否全部删除？')) {
        axios.get('http://localhost:8088/data/removeAll').then((response) => {
          console.log(response.status)
          console.log('已全部删除')
        })
      }
      location.reload(0)
    },
    searchByY(){
      axios.get('http://localhost:8088/data/querryAllY?y=' + this.s_y).then((response) => {
        this.tableData = response.data
      })
    }
  },
}
</script>
  

  <style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>